<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>新增地址</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../css/iconfont.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="../css/app.css" />
		<link href="../css/mui.picker.css" rel="stylesheet" />
		<link href="../css/mui.poppicker.css" rel="stylesheet" />
		<style>
			html,
			body {
				background-color: #f6f6f6;
				min-height: 100vh;
				font-size: 0.373rem;
			}
			
			ul,
			ol {
				list-style: none;
			}
			
			body input[type='text'],
			ul,
			li {
				padding: 0;
				margin: 0;
			}
			
			.clear {
				clear: both;
				height: 0;
				font-size: 0;
				line-height: 0;
				visibility: hidden;
				overflow: hidden;
			}
			/*编辑地址*/
			
			.editor_li {
				padding: 0 0.4rem;
				border-bottom: 1px solid #f6f6f6;
				line-height: 1.2rem;
				background: #FFFFFF;
				display: flex;
				align-items: center;
				margin: 0;
			}
			
			.editor_li input {
				font-size: 0.373rem;
				border: 0;
			}
			
			.editor_li label {
				width: 2rem;
			}
			
			.editor_li input[type='text'] {
				width: 6.13rem;
			}
			
			.editor_li_b {
				margin-bottom: 0.266rem;
			}
			
			.editor_li_bett {
				justify-content: space-between;
				display: flex;
			}
			
			.my_butn button {
				background: url(../images/my_buttom.png) no-repeat;
				color: #FFFFFF;
				line-height: 1.266rem;
				height: 1.266rem;
				width: 100%;
				padding: 0;
				box-sizing: border-box;
				background-size: 100% 100%;
				border: 0;
			}
			
			.my_butn {
				margin: 1.093rem 0.373rem;
			}
			
			.editor_li_dw img {
				height: 0.8rem;
				width: 0.65rem;
			}
			
			.editor_li_dw {
				display: flex;
				align-items: center;
				border-left: 1px solid #000;
				padding-left: 0.36rem;
				box-sizing: border-box;
			}
			
			.editor_li_bett label {
				width: 2.7rem;
			}
			
			.mui-btnno {
				border: 0;
				padding: 0;
				width: 0;
			}
			
			.mui-btnsan {
				padding: 0;
				border: 0;
				text-align: left;
				font-size: 0.373rem;
				width: 6.13rem;
				margin: 0;
				color: #888888;
			}
			/*不能删不能合并省级联动*/
			/*.mui-poppicker.mui-active{background: #FFFFFF;}
        .mui-poppicker-body{    padding: 0 0.733rem;}
        .mui-poppicker-body .mui-picker{width: 100%!important;height: 0.933rem;margin: 0.693rem 0 0;background: #fff;border: 1px solid #c4c4c4;color: #666666;
font-size: 0.426rem;}
        .mui-poppicker-btn-cancel{display: none;}
        .mui-poppicker-btn-ok{width: 100%;}
        .mui-poppicker-header{padding: 0;}
        .mui-poppicker-header .mui-btn{background: #1c84fc;line-height: 1.2rem;font-size: 0.426rem;padding: 0;margin: 0;border: 0;}*/
		</style>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=mUnG2gyZMpF536eT3rP2jcMwaRTcPQDB"></script>
	</head>

	<body>
		<!--顶部-->
		<header class="mui-bar mui-bar-nav" style="display: block;">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">新增地址</h1>
		</header>
		<div class="my_content mui-content" id="app" style="padding-top: 44px;">
			<div class="editor">
				<ul class="editor_ul">
					<li class="editor_li">
						<label>收货人：</label>
						<input type="text" placeholder="" value="" id="name" />
					</li>
					<li class="editor_li">
						<label>手机号：</label>
						<input type="text" placeholder="" value="" id="phone" />
					</li>
					<li class="editor_li mui-content-padded">
						<label>市区社区：</label>
						<button id='showUserPicker' class="mui-btn mui-btn-block mui-btnno" type='button'></button>

						<button id='showCityPicker' class="mui-btn mui-btn-block mui-btnno" type='button'></button>
						<div id='cityResult' class="ui-alert"></div>
						<button id='showCityPicker3' class="mui-btn mui-btn-block mui-btnsan" type='button' v-html="address"></button>
						<input type="hidden" name="city" id="city" value="" />
						<div id='cityResult3' class="ui-alert"></div>
						<div class="editor_li_dw" @click="get_position">
							<img src="../images/my_dw.png" />
						</div>
					</li>
					<li class="editor_li editor_li_b">
						<label>详细地址：</label>
						<input type="text" placeholder="如9栋" value="" id="cityn" />
					</li>
					<!--<li class="editor_li editor_li_bett mui-table-view-cell">-->
					<!--<label>设为默认地址：</label>-->
					<!--<div class="mui-switch mui-switch-blue mui-switch-mini">-->
					<!--<div class="mui-switch-handle"></div>-->
					<!--</div>-->
					<!--</li>-->
				</ul>
				<div class="my_butn"><button class="subbtn">确认</button></div>
			</div>

		</div>
		<div id="allmap" style=" display: none;"> </div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.picker.js"></script>
		<script src="../js/mui.poppicker.js"></script>
		<script src="../js/city.data.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/city.data-3.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/flexible.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/js.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/host.config.js" type="text/javascript" charset="utf-8"></script>

		<script>
			mui.init({
				swipeBack: true //启用右滑关闭功能
			});
			// 读取用户信息
			var user = localStorage.getItem("user");
			user = JSON.parse(user);
			// 读取用户社区信息
			var sq_info = localStorage.getItem("address");
			sq_info = JSON.parse(sq_info);
			var app = new Vue({
				el:'.mui-content',
				data:{
					address:'请选择'
				},
				methods:{
					get_position:function(){
						get_position();
					}
				}
			})
			
			var formdata = {
				name: '',
				phone: '',
				province: '',
				city: '',
				area: '',
				cityn: '',
				switch: '',
			}

			mui.plusReady(function() {
				console.log('plusReady')

			})

			function get_position() {
				if(window.plus) {
					plus.nativeUI.showWaiting("定位中...")
				}

				//使用百度地图定位
				var p = "108.950546,34.324483";
				
				
				var geolocation = new BMap.Geolocation();
				geolocation.getCurrentPosition(function(r) {
					if(this.getStatus() == BMAP_STATUS_SUCCESS) {
						var mk = new BMap.Marker(r.point);
						 
						//alert('您的位置：' + r.point.lng + ',' + r.point.lat);
						point_to_address(r.point.lng,r.point.lat)
					} else {
						plus.nativeUI.closeWaiting()
						mui.toast("定位失败")
					}
				}, {
					enableHighAccuracy: true
				})
				
				function point_to_address(lng,lat){
					//  经纬度转位置信息
 
					var point = new BMap.Point(lng, lat);
					var geoc = new BMap.Geocoder();
					var pt = point;
					geoc.getLocation(pt, function(rs) {
						console.log(rs)
						var addComp = rs.addressComponents;
						console.log(addComp)
						
						formdata.province = addComp.province
						formdata.city = addComp.city
						formdata.area = addComp.district
						app.address = addComp.province+" "+addComp.city+" "+addComp.district;
//						alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
						if(window.plus) {
							plus.nativeUI.closeWaiting()
						}
	
					});
					
					//定位超过5秒关闭等待动画
					setTimeout(function() {
						if(window.plus) {
							plus.nativeUI.closeWaiting()
						}
					}, 5000)
				}
				   
				
				/*
				//使用手机原生定位
				plus.geolocation.getCurrentPosition(function(p) {
					//定位成功
					console.log(JSON.stringify(p))
					//						mui.toast(p.address.province+" "+p.address.city+" "+p.address.district)
					document.getElementById('showCityPicker3').innerText = p.address.province + " " + p.address.city + " " + p.address.district

					plus.nativeUI.closeWaiting()
				}, function(err) {
					//定位失败
					plus.nativeUI.closeWaiting()

				}, {});
				//定位超过5秒关闭等待动画
				setTimeout(function() {
					plus.nativeUI.closeWaiting()
				}, 5000)
					
				*/
			}

			mui('.mui-content .mui-switch').each(function() { //循环所有toggle
				formdata.switch = (this.classList.contains('mui-active') ? 'true' : 'false')
				//toggle.classList.contains('mui-active') 可识别该toggle的开关状态
				console.log((this.classList.contains('mui-active') ? 'true' : 'false'))
				/**
				 * toggle 事件监听
				 */
				this.addEventListener('toggle', function(event) {
					formdata.switch = ((event.detail.isActive ? 'true' : 'false'))
					//event.detail.isActive 可直接获取当前状态
				});
			});

			//表单提交
			mui(document.body).on('tap', '.subbtn', function() {
				var name = document.querySelector('#name').value
				var phone = document.querySelector('#phone').value
				var cityn = document.querySelector('#cityn').value
				var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+\d{8})$/;

				 
				if(!name) {
					mui.toast("姓名不能为空", {
						duration: 'short',
						type: 'div'
					});
					return false
				} else if(!phone) {
					mui.toast("手机号不能为空", {
						duration: 'short',
						type: 'div'
					});
					return false
				} else if(!myreg.test(phone)) {
					mui.toast("手机号不正确", {
						duration: 'short',
						type: 'div'
					});
					return false
				} else if(!formdata.province) {
					mui.toast("地址不能为空", {
						duration: 'short',
						type: 'div'
					});
					return false
				} else if(!cityn) {
					mui.toast("详细地址不能为空", {
						duration: 'short',
						type: 'div'
					});
					return false
				} else {
					console.log(formdata);
					mui.get(host_config.app_server + "/address/addlist", {
						name: name,
						phone: phone,
						address: cityn,
						province: formdata.province,
						city: formdata.city,
						area: formdata.area,
						uid: user.uid,
						bid: sq_info.sqid,
						default: 1,
						account_type:user.account_type

					}, function(data) {
						if(data.code == 3001) {
							mui.toast("收货地址不能超过4条", {
								duration: 'short',
								type: 'div'
							})
							return false
						} else if(data.code == 1) {
							mui.toast("添加成功!", {
								duration: 'short',
								type: 'div'
							})
							if(window.plus) {
								plus.webview.currentWebview().opener().reload();
								plus.webview.currentWebview().close();
							} else {
								mui.openWindow({
									url: 'address_list.html',
									id: 'address_list',
								})
							}

						}
					}, 'json')
				}
			})
		</script>
		<!--省市联动-->
		<script>
			(function($, doc) {
				$.init();
				$.ready(function() {
					/**
					 * 获取对象属性的值
					 * 主要用于过滤三级联动中，可能出现的最低级的数据不存在的情况，实际开发中需要注意这一点；
					 * @param {Object} obj 对象
					 * @param {String} param 属性名
					 */
					var _getParam = function(obj, param) {
						return obj[param] || '';
					};
					//-----------------------------------------
					//					//级联示例
					var cityPicker3 = new $.PopPicker({
						layer: 3
					});
					cityPicker3.setData(cityData3);
					var showCityPickerButton = doc.getElementById('showCityPicker3');
					var cityResult3 = doc.getElementById('cityResult3');
					showCityPickerButton.addEventListener('tap', function(event) {
						cityPicker3.show(function(items) {
							showCityPickerButton.innerText = _getParam(items[0], 'text') + " " + _getParam(items[1], 'text') + " " + _getParam(items[2], 'text');
							formdata.province = _getParam(items[0], 'text')
							formdata.city = _getParam(items[1], 'text')
							formdata.area = _getParam(items[2], 'text')
							//console.log(showCityPickerButton.innerText)
							//返回 false 可以阻止选择框的关闭
							//return false;
						});
					}, false);
				});
			})(mui, document);
		</script>
	</body>

</html>